<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-21 16:18:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-27 19:12:39
-->
<template>
  <div class="me">
    <div class="header">
      <div class="logo">
        <img :src="user_info.userFace" alt="">
      </div>
      <div class="info">
        <div class="name">
          {{user_info.realname}}
        </div>
      </div>
    </div>
    <div class="options">
      <div class="option" @click="$router.push('/address')">
        <div class="name">
          <van-icon name="location-o" />
          <span>地址管理</span>
        </div>
        <div class="right">
         <van-icon name="arrow" />
        </div>
      </div>
      <div class="option" @click="$router.push('/home/orders')">
        <div class="name">
          <van-icon name="orders-o" />
          <span>我的订单</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="option">
        <div class="name">
          <van-icon name="question-o" />
          <span>帮助中心</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="option"  @click="logoutHandler">
        <div class="name">
          <van-icon name="contact" />
          <span>退出</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {useRouter} from 'vue-router'
import {computed,onMounted,ref} from 'vue'
import {useStore} from 'vuex'

export default {
  setup() {
    let router = useRouter();
    let store = useStore();
    let user_info = computed(()=> store.state.user.user_info )


    let logoutHandler = ()=>{
      localStorage.removeItem('token');
      router.push('/login');  
    }

    return {
      logoutHandler,
      user_info
    }
  },
}
</script>

<style lang="scss" scoped>
.me {
  .header {
    height: 180px;
    background-color: pink;
    display: flex;
    align-items: center;
    padding: 0 1em;
    .logo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #f4f4f4;
      margin-right: 1em;
      img {
        width:100%
      }
    }
    .info {
       .name {
        color: #333;
        font-size: 20px;
      }
    }
  }
  .options {
    border-radius: 5px;
    background-color: #fff;
    margin: 1em;
    .option {
      cursor: pointer;
      padding: 0 .5em;
      line-height: 3.6em;
      border-bottom: 1px solid #efefef;
      display: flex;
      .name {
        flex: 1;
        .van-icon {
          margin-right: .5em;
        }
      }
    }
  }
}
</style>